<template>
    <div class="common-layout">
      <el-container>
        <el-aside width="200px" height="900px">
            <el-menu                
                class="el-menu-vertical-demo"
                background-color="#ecf5ff"               
                router="true"
            >   <el-menu-item >
                 <template #title>
                    <span><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智能家居</b></span>
                  </template>
                </el-menu-item>

                <el-menu-item index="/card">
                  <template #title>
                    <el-icon><House /></el-icon>
                    <span>我的家居</span>
                  </template>     
                </el-menu-item>

                <el-menu-item index="/scens">
                  <el-icon><Menu /></el-icon>
                  <span>Navigator Two</span>
                </el-menu-item>

                <el-menu-item index="3">
                  <el-icon><CirclePlus /></el-icon>
                  <span>Navigator Three</span>
                </el-menu-item>

                <el-menu-item index="4">
                  <el-icon><setting /></el-icon>
                  <span>Navigator Four</span>
                </el-menu-item>
              </el-menu>              
        </el-aside>

        <el-container>
          <el-header>
            <div id="header">
              <el-dropdown style="padding-right: 5px;padding-top: 31px">
                <el-button color="#c6e2ff"  size="small" round="true">
                  <div>hello jag </div>
                  <el-icon><Setting /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>账号设置</el-dropdown-item>
                      <el-dropdown-item>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                    </template>
              </el-dropdown>
              <div class="box"> 
                <div>
                  <img src="../imgs/tx.jpeg" alt="">
                </div>
              </div>
            </div>
            
          </el-header>
          <div style="margin-top: 1px;">

          </div>
          <el-main><RouterView/></el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
import { ArrowDown } from '@element-plus/icons-vue'

export default{
  ArrowDown
}

</script>

<style scoped>

   div,span{
    margin: 0px;
    padding: 0px;
   }

  .el-aside{
    background-color:var(--el-color-primary-light-9)
  }

   .el-header{
     background-color: var(--el-color-primary-light-7);
   }

   .el-main{
     background-color: var(--el-color-primary-light-7);
   }

   #header{
    color: #22171c;
      font-size: 22px;
      text-align: right;
      margin: 0;
   }
   .box{
    
    display: inline-block;
    width: 50px;
    padding-right: 10px;
    height: 50px;
    background-color: #f1eded;
    margin-top:4px;
    border-radius: 100%;
    box-sizing: border-box;
    transition:all .9s;
    }

    .box>div{
      width: 100%;
      height: 100%;
     
      text-align: center;
    }

    .box>div>img{
      width: 6vmin; 
      height: 6vmin; 
      border-radius: 50%;
      
      display: block;
      background-size:contain;
      object-fit: cover; 
      object-position: center;
    }
    .example-showcase .el-dropdown-link {
      cursor: pointer;
      color: var(--el-color-primary);
     display: flex;
      align-items: center;
    }
   
</style>
  